
<template>
  <div id="building">
    <!-- <ul>
      <li v-for="(item, index) in list" :key='index' @click='JumpItem(item)'>
        <img :src="item.img" alt="">
        <p>{{item.name}}</p>
      </li>
    </ul> -->
    <ul
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10">
      <li v-for="(item, index) in list" :key="index" @click="JumpItem(item)">
        <img :src="item.img" alt="">
        <p>{{item.name}}</p>
      </li>
      <load-more :show-loading="false" tip="暂无更多数据" v-show="isNoData" background-color="#fbf9fe"></load-more>
      <load-more :show-loading="false" tip="数据加载中..." v-show="!isNoData" background-color="#fbf9fe"></load-more>
    </ul>
    <div class="fixed" @click='JumpI'>
      <img src="../../../wechat/static/images/sy_xf.png" alt="">
    </div>
  </div>
</template>

<script>
import { LoadMore } from "vux";
export default {
  name: "building",
  data() {
    return {
      isNoData: false,
      list: [],
      pageIndex:1,
      pageSize:10
    };
  },
  mounted() {
    this.loadMore();
  },
  beforeCreate(){
    localStorage.setItem('userType','normal')
  },
  created() {},
  methods: {
    loadMore() {
      if(this.isNoData || this.isloading)return
      this.isloading = true;
      this.getList()
    },
    getList() {
      let url =
        this.$CONSTANT.TEAM.findEsTeamByPage +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        pageIndex: this.pageIndex, //第几页
        pageSize: this.pageSize //每页大小
      };
      console.log(param);
      // this.$vux.loading.show({
      //   text: "loading"
      // });
      this.$common.post(url, param, res => {
        this.isloading = false
        this.pageIndex++
        setTimeout(() => {
          this.$vux.loading.hide()
        }, 800);
        if (res.status == 200) {
          var bussData = res.data.bussData;
          bussData.forEach(element => {
            this.list.push({
              img: element.images.length > 0 ? element.images[0].fileUrl : "",
              id: element.id,
              name: element.title
            });
          });
          if(bussData.length <this.pageSize) {
            this.isNoData = true
          }
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    JumpItem(item) {
      this.$router.push({ path: "/buildingD", query: { id: item.id } });
    },
    JumpI() {
      this.$router.push('./home')
    }
  },
  components: {
    LoadMore
  }
};
</script>

<style lang="less">
#building {
  ul {
    margin: 10px;
    padding-top: 10px;
    margin-top: 0px;
    li {
      margin-bottom: 10px;
      height: 195px;
      position: relative;
      border: 1px solid transparent;
      border-radius: 5px;
      img {
        height: 195px;
        width: 100%;
        border: 1px solid transparent;
        border-radius: 5px;
      }
      p {
        margin: 0 1px;
        position: absolute;
        bottom: 0;
        left: 0;
        height: 38px;
        // width: 100%;
        width: calc(100% - 1px);
        line-height: 38px;
        color: #fff;
        font-family: PingFang-SC-Medium;
        font-size: 14px;
        background: #000;
        opacity: 0.36;
        border: 1px solid transparent;
        text-indent: 10px;
      }
    }
  }
  .fixed {
    img {
      width: 49px;
      height: 49px;
    }
    position: fixed;
    right: 11px;
    bottom: 66px;
  }
}
</style>
